<template>
  <div class="login_contaienr">
    <div class="form">
      <!-- 动态样式 -->
      <!-- <div :class="['a', 'b']"> -->
      <el-form ref="ruleFormRef" :model="form" label-width="120px" size="large" :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" style="width: 500px;" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" style="width: 500px;" show-password />
        </el-form-item>
        <el-form-item>
          <el-button :loading="isloading" style="width:500px" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts" name="loginPage">
// 引入响应式ref
import { ref, reactive } from 'vue'
import { login } from '../../store'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { md5 } from 'md5js'
const storeLogin = login()

const isloading = ref(false)
const form = reactive({
  username: '',
  password: '',
})
const rules = ref<FormRules>({
  username: [
    { required: true, message: '请输入账号', trigger: ['blur', 'change'] },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
  ],
})

const ruleFormRef = ref<FormInstance>()
const onSubmit = () => {
  ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      isloading.value = true
      form.password = md5(md5(form.password, 32).split('').reverse().join(), 32)
      if (form.username == 'admin') {
        const res = await storeLogin.loginUp(form)
        if (res.status == 200) {
          console.log(res, 'res');

          isloading.value = false
          ElMessage({
            message: '登录成功',
            type: 'success',
          })
        }
      } else {
        isloading.value = false
        ElMessage({
          message: '账号或密码错误！',
          type: 'error'
        })
      }
    } else {
      return false
    }
  })
}
</script>

<style scoped lang="less">
.login_contaienr {
  width: 100%;
  height: 100%;
  background: url('../../assets/image/login/login.jpg') no-repeat;

  .form {
    position: absolute;
    left: 58%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    // margin: auto;
  }

  /deep/ .el-form-item__label {
    color: #fff;
  }

  /deep/ .el-input__suffix {
    cursor: pointer;
  }

  // .a {
  //   color: red;
  // }

  // .b {
  //   font-size: 20px;
  // }
}
</style>